<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>OS3Tree</title>
<link rel="stylesheet" type="text/css" href="tree.css" />
<style type="text/css">
/*
.os3tree { border: 1px solid blue; font-family: Arial, verdana, sans-serif; font-size: 12px; }
.os3tree .folder { border: 1px solid; background-color: #ffcccc; padding: 4px; font-weight: bold; }
.os3tree .folder_box { padding-left: 2em; }
.os3tree .node   { border: 1px solid; background-color: #ffffcc; padding: 2px; font-weight: normal;}
*/
.os3tree { font-family: Arial, verdana, sans-serif; font-size: 12px; }
.os3tree .folder { padding: 2px; font-weight: bold; }
.os3tree .folder_box { padding-left: 2em; }
.os3tree .node   { padding: 2px; font-weight: normal;}

.os3tree a { text-decoration: none }
.os3tree a:hover { text-decoration: underline; background-color: yellow; border: 1px solid red; }
</style>

<script type="text/javascript" src="../../os3jslib/liwe.js"></script>
<script type="text/javascript" src="../../os3jslib/string_enh.js"></script>

<script type="text/javascript" src="tree.js"></script>
<script type="text/javascript">
function click ( tree_id, node_id )
{
	alert ( "Click: " + tree_id + " - " + node_id );
}

function get_result ( id )
{
	var tree = OS3Tree.get_tree_by_id ( id );
	var a = tree.get_selection ();
	var l = a.length;
	var t, s = '';

	for ( t in a ) s += t + " = " + a [ t ] + '\n';

	document.getElementById ( 'result' ).value = s;
}

function res_list ( id )
{
	var tree = OS3Tree.get_tree_by_id ( id );
	var res;

	res = tree.mk_list ( 1, document.getElementById ( 'res_str' ).value );
	alert ( "Elementi trovati: " + res );
}

function show_res ( id, mode )
{
	var tree = OS3Tree.get_tree_by_id ( id );
	var v;
	
	if ( mode == 0 )
		v = tree.show_result_prev ();
	else
		v = tree.show_result_next ();

	switch ( v )
	{
		case OS3Tree.ERR_NO_RESULTS:
			alert ( "Non ci sono risultati da visualizzare" );
			break;

		case OS3Tree.ERR_TOP_REACHED:
			alert ( "E' gi&agrave; stata raggiunta la testa della lista" );
			break;

		case OS3Tree.ERR_BOTTOM_REACHED:
			alert ( "Siamo gi&agrave; in fondo alla lista" );
			break;
	}
}

function main ()
{
// CollectGarbage ();
var t = new OS3Tree.instance ( 'first' );
var n;

t.expand_limit = 1;
t.show_checkbox = true;
t.show_folder_checkbox = false;
t.scrollbars = true;
t.arrange_branches = true;

t.width = "300px";
t.height = "150px";

n = t.add_folder ( null, 'Primo' );
	t.add_node ( n, "Elemento 1 - Click", 'node_id', '123', 'click' );

	n = t.add_folder ( n, "Elemento 2" );
		t.add_node ( n, "Sub El 2-1" );
		t.add_node ( n, "Sub El 2-2" );
		t.add_node ( n, "Sub El 2-2" );

n = t.add_folder ( null, 'Secondo' );
	t.add_node ( n, "Elemento 1" );
	t.add_node ( n, "Elemento 2" );

	n = t.add_folder ( n, "Elemento 2" );
		t.add_node ( n, "Sub El 2-1" );
		t.add_node ( n, "Sub El 2-2" );

		n = t.add_folder ( n, "Elemento 2" );
			t.add_node ( n, "Sub El 2-1" );
			t.add_node ( n, "Sub El 2-2" );

n = t.add_folder ( null, "multi" );
	for ( var i = 0; i < 400; i ++ )
		t.add_node ( n, "Elem: " + i );


t.render ( 'tree' );


t.set_event ( 'click', multi_func );
t.set_event ( 'node_up', multi_func );
t.block_event ( 'click', true );

}

function multi_func ( tree, event_name, div, node )
{
	console.debug ( "EVENTO: %s - Nodo: %s - %s", event_name, div.id, node );
}

function _clear ()
{
	document.getElementById ( "tree" ).innerHTML = '';
}


</script>

</head>
<body onload="main()">
<div id="tree"></div>
<textarea id="result" rows="5" cols="40"></textarea>

<div onclick="get_result('first')">Get Result</div>
<form action="#"><input id="res_str" /></form><button onclick="res_list('first')">Result List</button><button onclick="show_res('first', 0)">-</button><button onclick="show_res('first', 1)">+</button>

<button onclick="_clear()">Pulisci</button>
<button onclick="main()">Crea</button>


</body>
</html>
